import Taro from '@tarojs/taro'
import { View, Form, Picker } from '@tarojs/components'

import FormGroup from '../../components/formGroup'

import './index.less'

class AuthName extends Taro.Component {
  state = {
    selector: ['美国', '中国', '巴西', '日本'],
    selectorChecked: '美国',
    form: {
      cardNumber: '',
      bankName: '',
      cardholder: ''
    }
  }

  onChange = e => {
    this.setState({
      selectorChecked: this.state.selector[e.detail.value]
    })
  }

  onTimeChange = e => {
    this.setState({
      timeSel: e.detail.value
    })
  }
  onDateChange = e => {
    this.setState({
      dateSel: e.detail.value
    })
  }

  // 双向绑定数据
	handleInput = (key, e) => {
		const value = e.target.value

		this.setState({
			form: {
				...this.state.form,
				[key]: value
			}
		})
	}

	// 清除输入框
	handleClear = key => {
		this.setState({
			form: {
				...this.state.form,
				[key]: ''
			}
		})
  }
  
  // 提交
	handleSubmit = e => {
    Taro.showModal({
      content: '身份证信息一旦上传不可修改',
      success: function (res) {
        if (res.confirm) {
          Taro.navigateTo({
          	url: '/pages/authName/index'
          })
        }
      }
    })
	}

  render() {
    const { form } = this.state

    return (
      <View className="auth-wrap">
        <View className="title">
          <View>添加银行卡</View>
          <View>添加银行卡方便总部打款结算</View>
        </View>
        <Form onSubmit={ this.handleSubmit }>
					<FormGroup
            label="银行卡号"
            type="number"
						value={ form.cardNumber }
						placeholder="请输入银行卡号"
						input={ this.handleInput.bind(this, 'cardNumber') }
						clear={ this.handleClear.bind(this, 'cardNumber') }
					>
            <Button hoverClass="btn-active" className="scanning">扫描识别</Button>
          </FormGroup>
          <FormGroup
            label="开户行"
            type="text"
						value={ form.bankName = this.state.selectorChecked }
            placeholder="请选择开户行"
            disabled
						input={ this.handleInput.bind(this, 'bankName') }
						clear={ this.handleClear.bind(this, 'bankName') }
					>
            <View className="at-icon at-icon-chevron-right" />
            <Picker
              className="picker"
              mode="selector"
              range={ this.state.selector }
              onChange={ this.onChange }
            >
              { this.state.selectorChecked }
            </Picker>
          </FormGroup>
          <FormGroup
            label="持卡人"
            type="text"
						value={ form.cardholder }
						placeholder="请输入持卡人姓名"
						input={ this.handleInput.bind(this, 'cardholder') }
						clear={ this.handleClear.bind(this, 'cardholder') }
					/>
          <View className="next">
						<Button
							hoverClass="btn-active"
							formType="submit"
							// disabled={ this.isPhone(form.phone) && form.code ? false : true }
						>确认</Button>
					</View>
				</Form>
      </View>
    )
  }
}

export default AuthName